<script setup>
import {reactive, ref} from "vue";
import adminApi from "@/api/adminApi.js";
import router from "@/router/index.js";
import {adminStore, tokenStore} from "@/store/index.js";
import {SwitchButton} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const activeIndex = ref('1')
//取出当前登录用户的信息
const loginAdmin = reactive({
  name:'未登录'
})
//菜单  用户管理  分类管理  商品管理
const menuData = ref([
  {name: '预约管理', icon: 'GobletFull', children: [
      {name: '预约列表', icon: 'GobletSquareFull', path: "/reserve"},
      {name: '数据统计', icon: 'TrendCharts', path: "/charts"},
    ]},
  {name: '课程管理', icon: 'Notebook', children: [
      {name: '课程列表', icon: 'Document', path: "/course"},
      {name: '课程日历', icon: 'Calendar', path: "/courseCalendar"},
    ]},
  {name: '会员管理', icon: 'User', children: [
      {name: '会员列表', icon: 'UserFilled', path: "member"},
    ]},
  {name: '教练管理', icon: 'Avatar', children: [
      {name: '教练列表', icon: 'List', path: "coach"},
    ]},
  {name: '管理员管理', icon: 'Lock', children: [
      {name: '管理员列表', icon: 'Setting', path: "admin"},
    ]},
  {name: '任务管理', icon: 'Timer', children: [
      {name: '定时任务列表', icon: 'Setting', path: "task"},
    ]},
]);
//获取登录用户
getLoginAdmin();
function getLoginAdmin(){
  adminApi.getLoginAdmin().then(result=>{
    if (result.code === 200) {
      loginAdmin.name = result.data.name;
      //router.push('/charts')
    } else {
      router.push('/login')
    }
  });
}
/*编程式导航*/
function handleMenu(key){
  if (key){
    router.push(key)
  }
}
/*登出*/
function logout(){
  tokenStore().token=null
  console.log("token",tokenStore().token)
  router.push('/login')
}
/*显示编辑*/
const editVisible = ref(false)
let editAdmin = ref({})
function showEdit(){
  editVisible.value =true
  adminApi.getLoginAdmin().then(resp=>{
    if (resp.code===200){
      editAdmin.value=resp.data
      editAdmin.value.password=''
    }
  }).catch(()=>ElMessage.error("请求异常"))
}
function cancel(){
  editVisible.value =false
  editAdmin.value={}
}
/*修改管理员信息*/
function handleEdit(){
  const regex = /^1[3-9]\d{9}$/;
  if (!regex.test(editAdmin.value.phone)) {
    ElMessage.error('请输入有效的手机号')
    return false;
  }
  if (editAdmin.value.name===null||editAdmin.value.name===''){
    ElMessage.error('名称不能为空')
    return
  }
  if (editAdmin.value.phone===null||editAdmin.value.phone===''){
    ElMessage.error('手机号不能为空')
    return
  }
  adminApi.modifyAdmin(editAdmin.value)
      .then(response=>{
        if (response.code===200){
          ElMessage({
            message:'修改成功',
            type:'success'
          })
          editVisible.value = false
          location.reload()
        }else{
          ElMessage.error(response.msg)
        }
      })
      .catch(e=>{
        ElMessage.error('请求异常')
      })
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="1">

        <div style="height: 60px;line-height: 60px; text-align: right; color: #FFF; font-size: 20px; margin-right: 24px;">
          <el-icon @click="isCollapse=!isCollapse">
            <Expand v-if="isCollapse"></Expand>
            <Fold v-else></Fold>
          </el-icon>
        </div>

        <el-menu active-text-color="#ffd04b" background-color="#0c1d40" class="el-menu-vertical-demo"
                 default-active="/charts" text-color="#fff" :collapse="isCollapse"
                 @select="handleMenu">
          <!-- 动态生成菜单 -->
          <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="index.toString()">
            <template #title>
              <component
                  class="icons"
                  :is="menu.icon"
                  style="width: 1em; height: 1em; margin-right: 8px" >
              </component>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item v-for="(child, ind) in menu.children" :key="ind" :index="child.path">
              <el-icon><component
                  :is="child.icon">
              </component></el-icon>
              <span>{{ child.name }}</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-menu :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal"
                   :ellipsis="false"
                   background-color="#f3f7ff"
                   text-color="#393939"
                   active-text-color="#ffd04b"
                   @select="handleSelect">

            <el-menu-item index="0">
              <img style="height: 80%" src="@/assets/logo.png" alt="中享思途" />
              <span style="padding-left: 50px; font-size: 24px; color:#393939;">思泰隆-健身房课程预约系统(STL-gym)</span>
            </el-menu-item>
            <div class="flex-grow" />
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Stamp></Stamp></el-icon>
                {{ loginAdmin?loginAdmin.name:'没登录' }}
              </template>
              <el-menu-item index="1-1">
                <el-button type="primary" @click="showEdit">修改信息</el-button>
              </el-menu-item>
              <el-menu-item index="logout">
                <el-button type="danger" @click="logout">退出<el-icon><SwitchButton></SwitchButton></el-icon></el-button>

              </el-menu-item>
            </el-sub-menu>

          </el-menu>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <!-- 编辑的弹窗 -->
  <el-dialog v-model="editVisible" title="编辑管理员" width="500">
    <el-form :model="editAdmin">
      <el-form-item label="电话" :label-width="60">
        <el-input v-model="editAdmin.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="60">
        <el-col :span="22">
          <el-input v-model="editAdmin.password" autocomplete="off" show-password/>
        </el-col>
      </el-form-item>
      <el-form-item label="姓名" :label-width="60">
        <el-input v-model="editAdmin.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleEdit">
          编辑
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>



<style>
.flex-grow {
  flex-grow: 1;
}

.common-layout,
.el-container {
  height: 100%;
}

.el-header {
  --el-header-padding: 0;
  --el-header-height: 80px;
  box-sizing: border-box;
  flex-shrink: 0;
  height: var(--el-header-height);
  padding: var(--el-header-padding);
}

.el-menu--horizontal {
  height: 80px;
}

.el-aside {
  background-color: #0c1d40;
}

.el-main{
  padding: 0px;
}

.el-menu{
  border-width: 0px;
}
.el-menu-item{
  font-size: 16px;
}
.el-menu-demo{
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.el-sub-menu__title{
  font-size: 16px;
}
</style>